<template>
  <div class="c-live-pay">
    <owg-live-pay
      ref="h5Pay"
      class="owg-live-pay"
      :open.sync="popupOpen"
      :aliveInfo="aliveInfo"
      :isLiveH5="isLiveH5"
      :isGrayMarketing="isGrayMarketing"
      :getContainer="getContainer"
      @failCallback="failCallback"
      @payComplete="payComplete"
      @toH5Details="toIframe"></owg-live-pay>
  </div>
</template>

<script>
import owgLivePay from './components/owgLivePay.vue'
// import {getGray} from "./fetch-data";

export default {
  name: "CLivePay",
  components: {
    owgLivePay,
  },
  props: {
    aliveInfo: {
      type: Object,
      default: () => ({})
    },
    isLiveH5: {
      type: Boolean,
      default: true
    },
    isGrayMarketing: {
      type: Boolean,
      default: false
    },
    open: {
      type: Boolean,
      default: false
    },
    // appen的dom
    getContainer: {
      type: String,
      default: 'body'
    },
    // 确认订单弹窗位置
    confirmOrderPosition: {
      type: String,
      default: 'bottom'
    }
  },
  data() {
    return {
      msg: "CLivePay",
      isInGray: true
    };
  },
  computed: {
    popupOpen: {
      get() {
        return this.open;
      },
      set(val) {
        this.$emit("update:open", val);
      }
    }
  },
  mounted() {
    this.$emit("hook:mounted");
  },
  methods: {
    failCallback(val) {
      this.$emit('failCallback', val)
    },
    payComplete(val) {
      this.$emit('payComplete', val)
    },
    toIframe(jumpUrl) {
      this.$emit("toH5Details", jumpUrl);
    },
    buy(params, useScatter = false) {
      this.$refs.h5Pay.buy(params, useScatter)
    }
  }
};
</script>

<style lang="scss" scoped>
.c-live-pay{
  padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
  padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
}
</style>
